/** 父组件模板中使用了其它子组件，父组件要获取子组件实例时
 * 需要给子组件上加上ref例如ref="root"，但是$refs并没有响应式
 * @see https://vuejs.org/api/built-in-special-attributes.html#ref
 * 需要响应式，需要将$refs.root存入data中
 * 继承了此组件，所有模板中的ref都会在refs中有一个相应变量
 * 可以不通过this.$refs.root而是通过this.refs.root(refs没有$)访问组件实例
 */
export default {
  data() {
    return {
      /** 所有ref组件(响应式) */
      refs: {},
    }
  },
  computed: {
    /** 首个ref组件 */
    ref() {
      for (const item in this.refs)
        return this.refs[item];
    }
  },
  mounted() {
    for (const item in this.$refs)
      this.refs[item] = this.$refs[item];
  },
}